<template>
	<view>
		<view class="grid-box">
			<view class="u-flex">
				<view class="u-m-r-20"><u-icon name="clock" size="80" :color="$u.color.infoDark"></u-icon></view>
				<view class="u-flex-1">
					<view class="head-title u-m-b-10"><text>{{orderForm.state}}</text></view>
					<view class="tips-txt"><text>订单已完结</text></view>
				</view>
				<view class="">
					<u-image :src="orderForm.barcode" width="80rpx" mode="widthFix" @click="seePhoto(orderForm.barcode)"></u-image>
				</view>
			</view>
		</view>
		
		<view class="grid-box">
			<view class="head-title u-m-b-20"><text>订单信息</text></view>
			<view class="msg-box">
				<view class="item">
					<text class="label">订单编号：</text>
					<view class="text">{{orderForm.number}}</view>
				</view>
				<view class="item">
					<text class="label">出库到：</text>
					<view class="text">{{orderForm.packstation.name}}</view>
				</view>
				<view class="item">
					<text class="label">出库时间：</text>
					<view class="text">{{$u.timeFormat(orderForm.createddatetime, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="item">
					<text class="label">完结时间：</text>
					<view class="text">{{$u.timeFormat(orderForm.endtime, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="item">
					<text class="label">出库总量：</text>
					<view class="text">{{orderForm.weight}}KG/{{orderForm.quantity}}件</view>
				</view>
				<view class="item">
					<text class="label">结算金额：</text>
					<view class="text">{{orderForm.amount}}元</view>
				</view>
			</view>
		</view>

		<view class="grid-box">
			<view class="head-title u-m-b-20"><text>出库明细总览</text></view>
			<!-- <goods-list :orderId="orderId" :deliverdetails="orderForm.details"></goods-list> -->
			<goods-table :details="confirmForm.details"></goods-table>
			<!-- <view class="total">
				<view class="u-flex">
					<text class="text u-flex-1 u-text-left">出库总量：{{orderForm.weight}}KG</text>
					<text class="text u-flex-1">出库总价值：{{orderForm.amount}}元</text>
				</view>
			</view> -->
		</view>
		<view class="grid-box">
			<view class="head-title u-m-b-30"><text>查看站点出库明细(共{{orderForm.store.length}}个)</text></view>
			<!-- <u-collapse :item-style='{"border-bottom":"1px solid #e4e7ed"}' style="border-top: 1px solid #e4e7ed;">
				<u-collapse-item :title="`${item.store.name}(${item.delivertime})`" v-for="(item,index) in orderForm.store" :key="index">
					<goods-list :orderId="orderId" :deliverdetails="item.details"></goods-list>
					<view>
						<view class="u-m-b-15">
							<text class="u-tips-color">共计重量/数量：{{item.weight}}KG/{{item.quantity}}件；总价值{{item.costamount}}元</text>
						</view>
					</view>
					<view class="upload-box u-m-b-10 u-m-t-10">
						<view class="item" v-for="(cell,i) in item.proves" :key="i">
							<u-image width="200rpx" height="200rpx" :src="utils.getPic(cell)" @click="seePhoto(fileURL+cell)"></u-image>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse> -->
			<u-cell-group class="u-m-t-20">
				<u-cell-item 
					:title="item.store.name"  
					:label="`共计重量/数量：${item.weight}KG/${item.quantity}件；总价值${item.costamount}元`"
					v-for="(item,index) in orderForm.store" 
					:key="index" 
					@click="storeDetails(item.details)"
					class="u-p-r-0 u-p-l-0">
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="grid-box" v-if="orderForm.remarks">
			<view class="head-title u-m-b-20"><text>备注</text></view>
			<view style="padding: 10px;border-color: rgb(220, 223, 230);text-align: left;border-radius: 4px;border: 1px solid #dcdfe6;min-height: 62px;">{{orderForm.remarks}}</view>
		</view>
		
		<view class="grid-box">
			<view class="head-title u-m-b-10"><text>上传的回执单</text></view>
			<view v-for="(item, index) in orderForm.details" :key="index">
				<view
					style="margin: 11px 0;padding: 16px;border: 1px solid #e4e7ed;border-radius: 6px;margin-top: 16px;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);" 
					>
					<view class="section-head u-m-b-20">
						<view class="u-flex">
							<u-image :src="fileURL + item.icon" class="u-m-r-4" border-radius="40" style="width: 40rpx;height: 40rpx;"></u-image>
							<span>{{item.names}}</span>
						</view>
					</view>
					<u-cell-group class="">
						<u-cell-item :title="cell.productname" v-for="(cell, i) in item.details" :key="i" @click="seePack(cell,i,item.isweighing)"
							class="u-p-r-0 u-p-l-0">
							<view slot="label">
								<view class="u-flex u-w-480">
									<view class="u-flex-1">
										{{cell.weight}}{{item.isweighing?'KG':'件'}} x {{cell.price}}元
									</view>
									<view class="u-flex-1 u-text-right u-color-orange">
										<text>金额：{{parseFloat(cell.amount).toFixed(2)}}</text>元
									</view>
								</view>
							</view>
						</u-cell-item>
					</u-cell-group>
				</view>
			</view>
			<view class="upload-box u-m-b-10 u-m-t-10">
				<view class="item" v-for="(item,index) in orderForm.proves" :key="index">
					<u-image width="200rpx" height="200rpx" :src="utils.getPic(item)" @click="seePhoto(item)"></u-image>
				</view>
			</view>
		</view>
		
		<view class="navigation">
			<view class="right">
				<u-button class="navbtn" @click="back">返回</u-button>
			</view>
		</view>
		<!-- 查看回执单 -->
		<u-popup v-model="show1" mode="bottom" border-radius="14" closeable z-index="997">
			<view class="u-p-30">
				<u-form :model="packDetails" ref="uForm" label-width="200">
					<u-form-item label="可回收物品">
						<text>{{packDetails.productname}}</text>
					</u-form-item>
					<u-form-item label="重量(KG)" v-if="packDetails.isweighing">
						<text>{{packDetails.weight}}</text>
					</u-form-item>
					<u-form-item label="数量(件)" v-else>
						<text>{{packDetails.quantity}}</text>
					</u-form-item>
					<u-form-item :label="`单价(元/${packDetails.isweighing?'KG':'件'})`">
						<text>{{packDetails.price}}</text>
					</u-form-item>
					<u-form-item label="金额(元)">
						<text>{{packDetails.amount}}</text>
					</u-form-item>
					<u-form-item label="备注">
						<text>{{packDetails.typeremarks}}</text>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
		<!-- 站点出库详情 -->
		<u-popup v-model="showStoreDetails" mode="bottom" :closeable="true" border-radius="14">
			<view class="u-p-l-30 u-p-r-30 u-p-t-80 u-p-b-60">
				<goods-table :details="storeItem"></goods-table>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props:{
			orderId: 0,
			orderForm: {}
		},
		data() {
			return {
				loading: true,
				// 拍照
				fileList: [],
				// 装车提交
				proves: [],
				// 回执信息
				packDetails: {
					typename: "",
					grossweight: null,
					tareweight: null,
					netweight: null,
					deductionweight: null,
					deductionratio: null,
					price: null,
					amount: null
				},
				packDetailsList: [],
				show: false,
				show1: false,
				// 装车证明图片列表
				endProves: [],
				// 查看站点出库详情
				showStoreDetails: false,
				storeItem: [],
				confirmForm:{
					details:[]
				}
			}
		},
		computed: {
			...mapState({
				header: state => state.Authorization
			})
		},
		watch:{
			show(val){
				if(!val){
					this.packDetails = {
						typename: "",
						grossweight: null,
						tareweight: null,
						netweight: null,
						deductionweight: null,
						deductionratio: null,
						price: null,
						amount: null
					}
				}
			}
		},
		created() {
			this.orderForm.details.forEach((item)=>{
				item.details.forEach((cell)=>{
					this.confirmForm.details.push({
						"show": false,
						"id": cell.productid,
						"price": cell.price,
						"weight": cell.weight || cell.quantity,
						"amount": cell.amount,
						"typeremarks": cell.remarks,
						"allowedit": true,
						"minprice": 0,
						"highprice": 0,
						"err": false,
						"typenames": item.names,
						"name": cell.productname,
						"isweighing": cell.weight > 0?true:false,
						"typeid": item.id,
						"pic": item.icon,
						"on": true
					})
				})
			})
		},
		mounted() {
			console.log('this.orderForm:',this.orderForm)
			this.orderForm?.details.forEach((item,index)=>{
				item.details.forEach((cell,i)=>{
					// cell.img = this.orderForm.endproves[i]
					// cell.weight = cell.netweight
					if(cell.quantity > 0){
						cell.isweighing = false
						cell.weight = cell.quantity
					}else{
						
					}
				})
			})
			this.loading = false
			this.$forceUpdate()
			// console.log(this.orderForm.packdetails)
		},
		methods: {
			// 查看地图
			goMap(lat,lng){
				uni.navigateTo({
					url: `/pages/brother/order/views/map/map?lat=${lat}&lng=${lng}`
				})
			},
			storeDetails(details){
				this.storeItem = []
				details.forEach((item)=>{
					item.details.forEach((cell)=>{
						this.storeItem.push({
							"show": false,
							"id": cell.productid,
							"price": cell.sellprice,
							"weight": cell.weight,
							"amount": cell.sellamount,
							"typeremarks": cell.remarks,
							"allowedit": true,
							"minprice": 0,
							"highprice": 0,
							"err": false,
							"typenames": item.names,
							"name": cell.productname,
							"isweighing": cell.weight > 0?true:false,
							"typeid": item.id,
							"pic": item.icon,
							"on": true
						})
					})
				})
				this.showStoreDetails = true
			},
			// 查看回执单单个详情
			seePack(item,index,isweighing){
				item.isweighing = isweighing
				this.packDetails = item
				this.packDetails.index = index
				this.show1 = true
			},
			// 订单详情
			detailsOrder(id){
				uni.navigateTo({
					url: '/pages/brother/order/views/views?id='+id
				})
			},
			seePhoto(url){
				let img = this.fileURL + url
				uni.previewImage({
					current: 0,
					urls: [img]
				});
			},
			// 打电话
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			back(){
				uni.redirectTo({
					url: '/pages/brother/outOrder/outOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-color-orange{
		color: $u-color-orange;
	}
	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 24rpx;
		margin-top: 30rpx;
		box-shadow: $u-color-border-shadow;
		.head-title{
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			.more{
				color: $u-color-blue;
			}
		}
		.tips-txt{
			color: $u-tips-color;
			font-size: 24rpx;
		}
	}
	// 订单
	.order {
		// width: 690rpx;
		// background-color: #ffffff;
		// margin: 30rpx auto;
		// border-radius: 30rpx;
		// box-sizing: border-box;
		// padding: 30rpx;
		// font-size: 28rpx;
		// box-shadow: $u-color-border-shadow;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-warning-dark;
			}
		}
		.item {
			display: flex;
			margin: 20rpx 0 0;
			justify-content: space-between;
			.left {
				margin-right: 20rpx;
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
				.delivery-time {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;
			.total-price {
				font-size: 32rpx;
				color: $u-color-orange;
			}
		}
		.time{
			font-size: 24rpx;
			margin: 20rpx 0;
			line-height: 40rpx;
		}
		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
				padding: 0 10rpx;
			}
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}
	// 按钮栏
	.navigation {
		display: flex;
		margin-top: 30rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		position: sticky;
		bottom: 0;
		z-index: 99;
		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			flex: 1;
			justify-content: space-around;
			padding: 20rpx;
			.navbtn{
				width: 100%;
				margin: 0 10rpx;
			}
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
				margin: 16rpx 0;
			}
			.cancel {
				margin-right: 30rpx;
				color: $u-tips-color;
			}
			.buy {
				background-color: #ff7900;
			}
		}
	}
	// 拍照
	.upload-box{
		.item{
			display: inline-block;
			margin: 20rpx 10rpx 20rpx 0
		}
	}
	// 
	.u-table-box{
		margin: 20rpx 0;
		.green{
			background-color: $u-color-green;
			color: #fff!important;
		}
		.red{
			background-color: $u-color-red;
			color: #fff!important;
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
			color: $u-color-orange;
		}
	}

	.u-line{
		border-bottom: 1px solid $u-border-color;
		padding-top: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.pack{
		display: flex;
		align-items: center;
		width: 630rpx;
		margin: 20rpx 0;
		.item{
			display: block;
			width: 200rpx;
			flex: 1;
			
			.name{
				color: $u-color-dark;
			}
			.text{
			}
		}
		// .icon{
		// 	font-size: 60rpx;
		// 	padding: 0 80rpx;
		// 	transform: rotate(90deg);
		// 	color: var(--gray);
		// }
	}
	.table-th-middle{
		width: 270rpx;
		flex: auto!important;
		padding: 0!important;
	}
</style>
